<!doctype html>
<html class="no-js" lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html">

    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>付款界面</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/meanmenu.min.css">
    <link rel="stylesheet" href="css/owl.carousel.css">
    <link rel="stylesheet" href="css/owl.theme.css">
    <link rel="stylesheet" href="css/owl.transitions.css">
    <link rel="stylesheet" href="css/nivo-slider.css">
    <link rel="stylesheet" href="css/jquery-ui-slider.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.simpleLens.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.simpleGallery.css">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="css/responsive.css">
    <script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<div id="header11"></div>
<div class="chart-area">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="chart-item table-responsive fix">
                    <div class="col-md-12"
                         style="text-align: center;height: 100px;line-height: 100px;background-color: cornflowerblue;">
                        <span id="massage" style="color: red;font-size: 18px;">订单有效期为：<span id="time">--分--秒</span>，请您尽快支付！</span>
                    </div>
                    <div>
                        <select name="site" class="col-md-12" style="height: 50px;">

                        </select>
                    </div>
                    <table class="col-md-12">
                        <thead>
                        <tr>
                            <th class="th-delate">订单号</th>
                            <th class="th-product">商品图片</th>
                            <th class="th-details">商品名字</th>
                            <th class="th-edit">商品类型</th>
                            <th class="th-price">成交价</th>
                            <th class="th-total">手续费</th>
                            <th class="th-delate">创建时间</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td hidden name="oid">

                            </td>
                            <td name="orderNum">

                            </td>
                            <td name="url">

                            </td>
                            <td name="gname">

                            </td>
                            <td name="cname">

                            </td>
                            <td name="transactionPerice">

                            </td>
                            <td name="charges">

                            </td>
                            <td name="buildTime">

                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="shoping-cart-button">
                    <div id="pay" class="cart-button-right">
                        <button type="button" class="btn custom-button" onclick="pay()">确认支付</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="footer11"></div>
<script src="js/vendor/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.nivo.slider.pack.js"></script>
<script src="js/jquery.meanmenu.min.js"></script>
<script src="js/jquery-price-slider.js"></script>
<script type="text/javascript" src="js/jquery.simpleGallery.min.js"></script>
<script type="text/javascript" src="js/jquery.simpleLens.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.scrollUp.min.js"></script>
<script src="js/dbclick.min.js"></script>
<script src="js/jquery.countdown.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</body>
<script type="text/javascript">
    $(function () {
        $('#header11').load("auction-head.html");
        $('#footer11').load('auction-footer.html');
    })

    <!-- 支付按钮 -->
    window.pay = () => {
        let oid = $("#oid").val();
        let sid = $("#sid").val();
        $.ajax({
            url: "../web-order/money/payOrder",
            method: "post",
            data: {
                oid: oid,
                sid: sid
            },
            success: function (result) {
                if (result.code == 200) {
                    alert("支付成功");
                    window.location.href = "buyer-order.html";
                } else if (result ==501) {
                    window.location.href="myWallet.html";
                }else {
                    alert("支付失败，请稍后重试");
                }
            }
        })
    }

    $(function() {
        $('#header11').load("auction-head.html");
        $('#footer11').load('auction-footer.html');
    })

    <!-- 定时器-->
    let maxtime = null;
    window.Countdown = () => {
        if (maxtime >= 0) {
            minutes = Math.floor(maxtime / 60 % 60);
            seconds = Math.floor(maxtime % 60);
            if (minutes < 10 || seconds < 10) {
                minutes = minutes < 10 ? "0" + minutes : minutes;
                seconds = seconds < 10 ? "0" + seconds : seconds;
            }
            msg = minutes + "分" + seconds + "秒";
            document.getElementById("time").innerHTML = msg;
            --maxtime;
        } else {
            clearInterval(timer);
            $("#massage").html("<a style='color: red'>很遗憾！订单已过期</a>");
            $("#pay").html("<button  type='button' class='btn custom-button' onclick='toOrder()'>回到订单页面</button>");
            alert("很遗憾！订单已过期！");
        }
    }
    <!-- 每秒调用-->
    timer = setInterval("Countdown()", 1000);


    //订单超时页面跳转
    window.toOrder = () => {
        window.location.href = "buyer-order.html";
    }


    <!-- 获取url中的参数 -->
    window.getQueryString = (name) => {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return '';
    };

    <!-- 页面刷新数据-->
    window.showPayOrder = (oid) => {
        $.ajax({
            url: "/web-order/order/findOrder",
            method: "post",
            data: {
                oid: oid
            },
            success: function (result) {
                let order = result.data;
                $("[name='oid']").html("<input id='oid' hidden value='" + order.oid + "'>")
                $("[name='orderNum']").html("<a>" + order.orderNum + "</a>");
                $("[name='url']").html("<img src='" + order.url + "' alt=\"加载失败\">");
                $("[name='gname']").html("<a>" + order.gname + "</a>");
                $("[name='cname']").html("<a>" + order.cname + "</a>");
                $("[name='transactionPerice']").html("<a>" + order.transactionPerice + "</a>");
                $("[name='charges']").html("<a>" + order.charges + "</a>");
                $("[name='buildTime']").html("<a>" + order.buildTime + "</a>");
                let buildTime = order.buildTime;
                let build = new Date(buildTime).getTime();
                let now = new Date().getTime();
                let leftTime = Number(now - build);
                maxtime = Number(15 * 60 * 1000 - leftTime);
            }
        })
    }

    <!-- 收货地址-->
    window.showSite = () => {
        $.ajax({
            url: "/web-order/site/showSite",
            method: "get",
            success: function (result) {
                $("[name='site']").html("");
                let sites = result.data;
                let htmls = "";
                htmls += "<option value=\"\" style=\"width: 100px\">请选择</option>";
                for (let i = 0; i < sites.length; i++) {
                    if (sites[i].flage == 2) {
                        htmls += "<option  id='sid' selected value='" + sites[i].sid + "' style='width: 180px'>" + sites[i].consignee + "," + sites[i].consigneeNum + "," + sites[i].consigneeAddress + "</option>";
                    } else {
                        htmls += "<option  id='sid' value='" + sites[i].sid + "' style='width: 180px'>" + sites[i].consignee + "," + sites[i].consigneeNum + "," + sites[i].consigneeAddress + "</option>";
                    }
                }
                $("[name='site']").append(htmls);
            }
        })
    }

    window.onload = function () {
        let oid = getQueryString("oid");
        showPayOrder(oid);
        showSite();
    }

</script>

</html>
